<template>
  <view class="login-container">



    <!-- 沉浸式导航栏 -->
    <s-nav-bar title="" :background="'transparent'" fixed immersive back
      :titleStyle="{ color: '#ffff', fontWeight: 'bold' }" :backStyle="{ color: '#fff' }"></s-nav-bar>
    <image class="bgs" src="https://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/haibg.png" />


    <view class="bigboxx">
      <!-- 顶部装饰区域 -->
      <view class="top-decor">
        <view class="logo">
          <image class="logo-icon" src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/logo.png" mode="widthFix">
          </image>
        </view>
      </view>

      <!-- 登录表单区域 -->
      <view class="login-form">
        <view class="form-title">欢迎登录</view>
        <view class="form-subtitle">影德岛</view>

        <!-- 账号输入框 -->
        <view class="input-group">
          <s-icon name="manager" size="22" color="#47c5c4" />
          <input class="input" type="text" placeholder="请输入账号" placeholder-class="placeholder"
            v-model="formData.username" />
        </view>

        <!-- 密码输入框 -->
        <view class="input-group">
          <s-icon name="lock" size="22" color="var(--v-theme)" />
          <input class="input" type="password" placeholder="请输入密码" placeholder-class="placeholder"
            v-model="formData.password" autocomplete="new-password" />
        </view>

        <!-- 登录按钮 -->
        <view class="login-btn" @click="handleLogin">
          <text>登 录</text>
        </view>
        <view class="login-link">
          <text>还没有账号？</text>
          <text class="link" @click="goToRegister">立即注册</text>
        </view>
        <!-- 其他登录方式 -->
        <view class="other-login">
          <view class="divider">
            <view class="line"></view>
            <view class="text">其他登录方式</view>
            <view class="line"></view>
          </view>

          <!-- 微信登录 -->
          <view class="wechat-login" @click="handleWechatLogin">
            <s-icon name="wechat" size="40" color="#09BB07" />
            <view class="wechat-text">微信一键登录</view>
          </view>
        </view>
      </view>

      <!-- 底部版权信息 -->
      <view class="footer">
        <view class="copyright"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    handleLogin() {
      if (!this.formData.username || !this.formData.password) {
        uni.showToast({
          title: "请输入账号和密码",
          icon: "none",
        });
        return;
      }

      // 这里添加实际的登录逻辑
      uni.showLoading({
        title: "登录中...",
      });
      this.sjuAjax.post("/user/login", this.formData, (res) => {
        console.log(res);
        if (res.code === 200) {
          this.sjuLogin.setToken(res.data.token, res.data.token_expire);
          uni.hideLoading();
          uni.showToast({
            title: "登录成功",
            icon: "success",
          });
          // 登录成功后跳转到首页
          uni.switchTab({
            url: "/pages/index/index",
          });
        }
      });
    },

    handleWechatLogin() {
      this.sjuAlert.showInfo("功能开发中");
      // 这里添加微信登录逻辑
      // 实际开发中需要调用微信SDK或后端接口
      // setTimeout(() => {
      //   uni.hideLoading();
      //   uni.showToast({
      //     title: "微信登录成功",
      //     icon: "success",
      //   });
      //   // 登录成功后跳转到首页
      //   uni.switchTab({
      //     url: "/pages/index/index",
      //   });
      // }, 1500);
    },
    goToRegister() {
      uni.navigateTo({
        url: '/pages/user/register'
      });
    }
  },
};
</script>

<style lang="scss">
.bgs {
  width: 100%;
  height: 100vh;
}

.bigboxx {
  position: fixed;
  width: 100%;
  height: 100%;
}

.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--v-bg);
}

/* 顶部装饰区域 */
.top-decor {
  width: 100%;
  height: 300rpx;
  border-radius: 0 0 80rpx 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .logo {
    width: 120rpx;
    height: 120rpx;
    color: #fff;
    border-radius: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo-icon {
      width: 88rpx;
    }
  }
}

/* 登录表单区域 */
.login-form {
  flex: 1;
  padding: 60rpx 50rpx;
  display: flex;
  flex-direction: column;

  .form-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .form-subtitle {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 60rpx;
  }
}

/* 输入框组 */
.input-group {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  padding: 0 30rpx;
  height: 100rpx;
  margin-bottom: 30rpx;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

  .input {
    flex: 1;
    height: 100%;
    padding-left: 20rpx;
    font-size: 32rpx;
  }

  .placeholder {
    color: #aaa;
    font-size: 32rpx;
  }
}

/* 登录按钮 */
.login-btn {
  height: 100rpx;
  background: var(--v-linear);
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 40rpx;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}

/* 其他登录方式 */
.other-login {
  margin-top: 80rpx;

  .divider {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .line {
      flex: 1;
      height: 1px;
      background: #ddd;
    }

    .text {
      padding: 0 20rpx;
      color: #999;
      font-size: 26rpx;
    }
  }

  .wechat-login {
    display: flex;
    flex-direction: column;
    align-items: center;

    .wechat-text {
      margin-top: 20rpx;
      color: #666;
      font-size: 28rpx;
    }
  }
}

/* 登录链接 */
.login-link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
  font-size: 28rpx;
  color: #666;

  .link {
    color: var(--v-theme);
    margin-left: 10rpx;
    text-decoration: underline;
  }
}

/* 底部版权信息 */
.footer {
  padding: 30rpx 0;

  .copyright {
    text-align: center;
    color: #999;
    font-size: 24rpx;
  }
}
</style>